<template>
  <div class="l-echart-progress"
       :style="styleSizeName"
       ref="main"
       @click="handleClick">
    <div :class="['l-echart-progress__text',{'l-echart-progress__text--line':type==='line'},{'l-echart-progress__text--circle':type==='circle'}]">
      <p :style="styleSuffixName">{{dataHandle.label}}</p>
      <p :style="styleName">
        <l-count-up v-if="dataHandle.value"
                       :end="Number(dataHandle.value)"></l-count-up>
      </p>
    </div>
    <el-progress text-inside 
                   :color="color"
                   :width="width"
                   :showText="false"
                   :strokeWidth="strokeWidth"
                   :percentage="dataHandle.data"
                   :type="type">
    </el-progress>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
    data() {
        return {
            dataHandle: {
                value: '',
                label: '',
                data: 0
            }
        }
    },
    mixins:[init],
    computed: {
        styleSuffixName () {
            return {
                fontWeight: this.option.suffixFontWeight || "normal",
                fontSize: (this.option.suffixFontSize || 40) + "px",
                color: this.option.suffixColor || "#333"
            };
        },
        styleName () {
            return {
                marginBottom: this.option.split + "px",
                fontWeight: this.option.fontWeight || "normal",
                fontSize: (this.option.fontSize || 40) + "px",
                color: this.option.color || "#333"
            };
        },
        type () {
            return this.option.type || "line";
        },
        color () {
            return this.option.borderColor || "#333";
        },
        strokeWidth () {
            return this.option.strokeWidth || 14;
        }
    },
    props: {
        option: {
        type: Object,
        default: () => {
            return {};
        }
        }
    },
    watch: {
        fresh:{
            handler(){
                if (this.dataType === 2) {
                    if (this.dataChart.length> 0) {
                        this.dataHandle.value = this.dataChart[0][this.valueKey]
                        this.dataHandle.label = this.dataChart[0][this.labelKey]
                        this.dataHandle.data = this.dataChart[0][this.percentKey]
                    }
                } else {
                    this.dataHandle = this.dataChart
                }
            },
        },
    },
    methods: {
        handleClick () {
            this.clickFormatter({
                data: this.dataHandle
            }, this.getItemRefs());
        }
    }
};
</script>


